import React  from 'react';
import { Table, Input, message, Popconfirm, Form, Button, Row, Col, Space, DatePicker } from 'antd';
import "./UserManage.css";
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import {findUser} from '../../axios/api'

const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };
export default class UserManage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            that: this,
            page:1,
            limit:10,
            total:0,
            data:[],
            formData:{},
            loading:false
        }
        this.columns = [
            {
                title: '用户名',
                dataIndex: 'userName',
                width: '15%',
                align: 'center',
                
                editable: true,
            },
            {
                title: '手机号码',
                dataIndex: 'mobile',
                width: '15%',
                align: 'center',
                
                editable: true,
            },
            {
                title: '邮箱',
                dataIndex: 'email',
                width: '15%',
                align: 'center',
                
                editable: true,
            },
            {
                title: '创建日期',
                dataIndex: 'createTime',
                width: '15%',
                align: 'center',
                
                editable: true,
            },
            {
                title: '操作',
                dataIndex: 'edmit',
                align: 'center',
                width: '15%',
                
                render: (text, record) => {
                    return (
                        <Space>
                            <Button type="primary" onClick={() => this.showModalUpdate(record)}>修改基本信息</Button>
                            <Popconfirm title="确认删除?" okText="确定" cancelText="取消" onConfirm={() => this.handleDelete(record.id)}>
                                <Button type="danger" >删除</Button>
                            </Popconfirm>
                        </Space>
                    )
                }
            },

        ];
    }
    componentDidMount(){
        this.refresh()
    }
    refresh=()=>{
        this.onFinish(this.state.formData);
        
    }
    onChangeNumber=(current,pageSize)=>{
        this.state.page=current;
        this.state.limit=pageSize;
        this.refresh();
    }
    onFinish = async (values)=>{
        debugger
        var limit=this.state.limit,skip=(this.state.page-1)*this.state.limit;
        var params={};
        if(values){
            params = values;
        }
        params.limit=limit;
        params.skip = skip;
        this.setState({loading:true});

        let res = await findUser(params);
        if (res.code === 200) {
            this.loading=false
            this.setState({data:res.data.data,total:res.data.count,loading:false});
        }
    }
    onValuesChange=(changedValues, allValues)=>{
        this.setState({formData:allValues});
    }
    resetCondition=()=>{
        this.state={
            that: this,
            page:1,
            limit:10,
            total:0,
            data:[],
            formData:{},
            loading:false
        }
        this.refresh();
    }
    render() {

        return (
            <div className="main-content">
                <Form {...layout} className="form-content" onFinish={this.onFinish} onValuesChange={this.onValuesChange}>
                    <Row >
                        <Col span={6} offset={0}>
                            <Form.Item
                                label="用户名"
                                name="userName"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={6} offset={2}>
                            <Form.Item
                                label="手机号码"
                                name="mobile"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row >
                        <Col span={6} offset={0}>
                            <Form.Item
                                label="邮箱"
                                name="email"
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={6} offset={2} >
                            <Form.Item
                                label="创建时间"
                                name="createTime"
                            >
                                <DatePicker.RangePicker locale={locale} />
                            </Form.Item>
                        </Col>
                        <Col span={4} offset={2}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    搜索
                             </Button>
                                <Button htmlType="reset"  onClick={this.resetCondition}>
                                    重置
                            </Button>
                            </Space>
                        </Col>
                    </Row>

                </Form>
                <Row className="table-content">
                    <Table
                        className="table-box"
                        bordered
                        loading={this.state.loading}
                        dataSource={this.state.data}
                        columns={this.columns}
                        // rowKey="student"
                        scroll={{ x: 1200, y: 500 }}
                        rowKey={record => record.id}
                        size="small"
                        rowSelection={{
                            type: 'checkbox',
                            ...rowSelection,
                          }}
                        //分页

                        pagination={{
                            position: 'bottom',
                            // defaultCurrent: this.state.page,
                            current: this.state.page,
                            defaultPageSize: this.state.limit,
                            total: this.state.total,
                            // showQuickJumper:true,
                            onChange: (current,p) => this.onChangeNumber(current,p)
                        }}
                    // 单选多选
                    // rowSelection={rowSelection}
                    />
                </Row>
            </div>
        )
    }
}